<template>
    <div>
        <pre>
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        </pre>
        <li v-for="n in evenNumbers">{{n}}</li>
    </div>
</template>

<script>
    export default {
        name: "arrayFilter",
        data() {
            return {
                numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        /**
         * 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。
         * 在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组
         */
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    }
</script>

<style scoped>

</style>
